<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        li,ul{margin:0;padding:0;list-style: none;} ul{width: 200px; height: 150px; } li,div{width: 200px; height: 150px; text-align: center; line-height: 150px; position: fixed; overflow: hidden; background: pink; color: #fff; font-size: 30px; } li{z-index: 2; opacity: 0; } button{width: 50px; height: 30px; margin-left: 75px; } 
    </style>
</head>
<body>
    <ul>
        <div style="z-index: 1;">点击开始</div>
        <li>学习</li>
        <li>正则</li>
        <li>啊啊</li>
        <li>搜索</li>
        <li>方法</li>
        <li>刚刚</li>
        <li>改改</li>
    </ul>
    <button>开始</button>

    <script>
        $(function(){
            var timer = setInterval(play, 50);
            var flag = false;
            function play(){
                if (flag == true) {
                    // 随机数
                    var num = Math.round(Math.random()*($('li').length-1));
                    for (var i = 0; i < $('li').length; i++) {
                        $('li').eq(i).css('opacity','0');
                        $('li').eq(num).css('opacity','1');
                    }
                }
            }

            $('button').click(function(){
                if (flag == false) {
                    flag = true;
                    $(this).html('暂停');
                    timer = setInterval(play,50);
                }else if(flag == true){
                    flag = false;
                    $(this).html('开始');
                    clearInterval(timer);
                }
            })
        })
    </script>
    
</body>
</html>